import React, { PropsWithChildren, useRef, useEffect } from 'react'
import { Carousel } from 'antd'

import './index.less'

import Slider from '@/typings/slider'

type Props = PropsWithChildren<{
    children?: any,
    sliders?: Slider[],
    getSliders?: any
}>

function HomeSliders(props: Props) {
    useEffect(() => {
        if (props.sliders.length === 0) {
            props.getSliders()
        }
    }, [])
    console.log('HomeSliders', props)
    return (
        <Carousel effect="scrollx" autoplay>
            {props.sliders.map((item: Slider, index: number) => (
                <div key={index}>
                    <img src={item.url} alt="" />
                </div>
            ))}
        </Carousel>
    )
}

export default HomeSliders